// @flow
import * as React from 'react';
import {Affix, Avatar, Button, Card, Col, List, Row, Space, Table, Typography} from "antd";
import styles from "./CartPage.module.css"
import {CheckCircleOutlined, DeleteOutlined, LikeOutlined, MessageOutlined, StarOutlined} from "@ant-design/icons";
import {useSelector} from "../../store/hook";


const columns = [
    {
        title: '1',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '2',
        dataIndex: 'amount',
        key: 'amount',
    },
];

// const data = Array.from({length: 5}).map((_, i) => ({
//     href: 'https://ant.design',
//     title: `ant design part ${i}`,
//     avatar: `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,
//     description:
//         'Ant Design, a design language for background applications, is refined by Ant UED Team.',
//     content:
//         'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
// }));

const IconText = ({icon, text}: { icon: React.FC; text: string }) => (
    <Space>
        {React.createElement(icon)}
        {text}
    </Space>
);

type Props = {};
export const CartPage = (props: Props) => {

    const data = useSelector(s => s.cart.data)

    const dataSource = [
        {
            key: '1',
            name: '原始金额:',
            amount: <Typography.Text delete>¥ 1000</Typography.Text>,
        },
        {
            key: '2',
            name: '优惠金额:',
            amount: <Typography.Title type="danger" level={3}>
                ¥ 0
            </Typography.Title>,
        },
        {
            key: '3',
            name: '应付金额:',
            amount: <Typography.Title type="danger" level={3}>
                ¥ {data.map(
                (s) =>
                    s.price
            ).reduce((a, b) => a + b, 0)
            }
            </Typography.Title>,
        },
    ];


    return (
        <div>
            <Row>
                <Col span={16}>
                    <div className={styles.productList}>
                        <List
                            itemLayout="vertical"
                            size="large"
                            dataSource={data}
                            renderItem={(item: any) => (
                                <List.Item
                                    key={item.id}
                                    actions={[
                                        <IconText icon={StarOutlined} text={item.quantity} key="list-vertical-star-o"/>,
                                        <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o"/>,
                                        <IconText icon={MessageOutlined} text="2" key="list-vertical-message"/>,
                                    ]}
                                    extra={
                                        <img
                                            width={100}
                                            height={100}
                                            alt="logo"
                                            src={item.productPic}
                                        />
                                    }
                                >
                                    <List.Item.Meta
                                        title={<a href={item.href}>{item.productName}</a>}
                                        description={item.productSubTitle}
                                    />
                                    {/*{item.content}*/}
                                    品牌：{item.productBrand + "; "}
                                    规格：{JSON.parse(item.productAttr).map((item: any) => (item.key + ": " + item.value + "， "))}
                                    价格：<Typography.Text type={"danger"}>¥ {item.price}</Typography.Text>
                                </List.Item>
                            )}
                        />
                    </div>
                </Col>
                <Col span={8}>
                    <Affix>
                        <div className={styles.paymentInfo}>
                            <Card className={styles.affixCard}
                                  actions={[
                                      <Button type="primary" danger>
                                          <CheckCircleOutlined/>
                                          下单支付
                                      </Button>,
                                      <Button>
                                          <DeleteOutlined/>
                                          清空
                                      </Button>,
                                  ]}
                            >
                                <Card.Meta
                                    title={<Typography.Title level={2}>总计</Typography.Title>}
                                    description={
                                        <Table
                                            columns={columns}
                                            dataSource={dataSource}
                                            showHeader={false}
                                            size="small"
                                            bordered={false}
                                            pagination={false}
                                        />
                                    }
                                />
                            </Card>
                        </div>
                    </Affix>

                </Col>
            </Row>
        </div>
    );
};
